<template>
	<view class="p20">
		<u-navbar title=" " autoBack placeholder :bgColor='scrollTop>0?"#fff":"transparent"'
			:border='scrollTop>0?true:false' />
		<view class="navbar d-s-c">
			<view class="avatar mr40 pr">
				<u-avatar size="140rpx"></u-avatar>
				<view class="level d-c-c">
					<u-icon name="level" color="#fff" size="15"></u-icon>
				</view>
			</view>
			<view class="item mr40 d-c-c d-c">
				<view class="">0</view>
				<view class="">最新</view>
			</view>
			<view class="item  d-c-c d-c">
				<view class="">0</view>
				<view class="">往期</view>
			</view>
		</view>
		<view class="title mt40">
			<view class="name fb f40 mb10">Jason.F阿锋</view>
			<view class="f24 gray6">活动主理</view>
		</view>
		<view class="tags f24 d-s-c f-w mt40">
			<view>新西兰nz怀卡托理工学院Wintec</view>
			<view>天秤座</view>
			<view>家乡 广州市</view>
			<view>常住地 广州市</view>
			<view>爱玩、新鲜事物</view>
			<view>#摄影</view>
			<view>#唱歌</view>
		</view>
		<view class=" mt30 f28">享受世间的美好，同时也去挑战一下自我、超越自我</view>
		<scroll-view scroll-x class="scroll mt40">
			<view class="item mr20" v-for="(item,index) in 6" :key="index">
				<u--image src="" width="110" height="110"></u--image>
			</view>
		</scroll-view>
		<u-loadmore nomore-text="TA举办的活动" line status="nomore" color="#000" marginTop="40"></u-loadmore>
		<view class="list">
			<list :list="list" nomore></list>
		</view>
	</view>
</template>

<script>
	import list from "@/components/list.vue";
	export default {
		components: {
			list
		},
		data() {
			return {
				list: [{
					name: "9-10月环境式驻场演唱会音乐剧阿米娅",
					urls: [],
					date: 'THU,SEP 04 - WED,OCT 08',
					address: '阿波罗尼亚 广州馆',
					status_name: '报名中',
					status: 1,
					fav: 0,
					tags: ['音乐/演出live', '戏剧']
				}, {
					name: "9-10月环境式驻场演唱会音乐剧阿米娅",
					urls: [
						'https://uviewui.com/album/1.jpg',
						'https://uviewui.com/album/2.jpg',
						'https://uviewui.com/album/3.jpg',
						'https://uviewui.com/album/4.jpg',
						'https://uviewui.com/album/7.jpg',
						'https://uviewui.com/album/6.jpg',
						'https://uviewui.com/album/5.jpg'
					],
					max: 7,
					date: 'THU,SEP 04 - WED,OCT 08',
					address: '阿波罗尼亚 广州馆',
					status_name: '已满员',
					status: 2,
					fav: 0,
					tags: ['音乐/演出live', '戏剧']
				}],
				scrollTop: 0

			};
		},
		onPageScroll({ scrollTop }) {
			// console.log(this);
			this.scrollTop = scrollTop
		},
		onLoad() {

		},
		methods: {

		},
	};
</script>

<style scoped lang="scss">
	.navbar {
		.level {
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: #3f8cff;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
		}

		.item {
			font-size: 24rpx;
			gap: 10rpx;
		}
	}

	.scroll {
		white-space: nowrap;

		.item {
			display: inline-block;

		}
	}

	.tags {
		view {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding: 8rpx 20rpx;
			border-radius: 20rpx;
			background-color: #f9f7fa;
		}
	}
</style>